<!--suppress ALL -->
<template>
  <div class="app-container">
    <h3 align="center" style="margin-top: -40px"><img src="../../assets/img/30-zihun50hao-baigetianxingti-b11.png"/></h3>
    <div class="filter-container" align="center" style="margin-top: -30px">
      <el-input :disabled="value == 1 " v-model="queryConditions" placeholder="请输入查询条件" style="width: 400px;" class="filter-item" clearable/>
      <el-select v-model="value" clearable style="width: 200px" class="filter-item" placeholder="查询类型">
        <el-option v-for="item in Qoptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"/>
      </el-select>
      <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="blurQuery()">
        搜索
      </el-button>
      <el-button @click="dialogAdd = true"  class="filter-item" type="success" icon="el-icon-s-custom">
        创建用户
      </el-button>
      <el-button  class="filter-item" type="primary" icon="el-icon-download" >
        导出
      </el-button>
      <el-dialog title="新增用户" :visible.sync="dialogAdd">
        <el-form :model="addlist" class="demo-ruleForm">
          <el-form-item label="用户名" :label-width="formLabelWidth" >
            <el-input v-model="addlist.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" >
            <el-input v-model="addlist.password" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="addlist.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" :label-width="formLabelWidth" >
            <el-input v-model="addlist.phoneNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="QQ号码" :label-width="formLabelWidth">
            <el-input v-model="addlist.qqNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="微信号码" :label-width="formLabelWidth">
            <el-input v-model="addlist.weChatNumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="cancelAdd()">取 消</el-button>
          <el-button type="danger" @click="confirmAdd()">确 定</el-button>
        </div>
        <div><center><label style="font-family: 'Leelawadee UI Semilight',serif;color: crimson">提示: 管理员您好,创建用户成功后,会通知账号绑定的邮箱!</label></center></div>
      </el-dialog>
    </div>
    <el-table
      :data="pageList.pageList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :row-style="{height:'10px'}"
      :cell-style="{padding:'0px'}"
    >
      <el-table-column align="center" label="序号" width="95" style="height: 100px">
        <template slot-scope="scope">
          {{ scope.$index +1 }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="170" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" width="170" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="QQ号码" width="170" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.qqNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="微信号码" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.weChatNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
            <div><el-button type="danger" plain @click="deleteUser(scope.row.userId)" size="small" class="button">删除用户</el-button></div>
            <div><el-button type="primary" plain size="small" class="button" @click="dialog(scope.$index)">编辑信息</el-button></div>
          <div>
              <el-dialog
                title="警告"
                :visible.sync="dialogVisible"
                width="30%">
                <span>确认删除该用户? &nbsp;&nbsp;此操作不可逆!</span><br>
                <span slot="footer" class="dialog-footer">
                  <el-button type="success"  @click="cancel()">取 消</el-button>
                  <el-button type="danger" @click="confirm(deleteId)">确 定</el-button>
                </span>
              </el-dialog>
          <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
            <el-form :model="updateList" class="demo-ruleForm">
              <el-form-item label="用户ID" :label-width="formLabelWidth">
                <el-input v-model="updateList.userId" autocomplete="off" :disabled="true" readonly></el-input>
              </el-form-item>
              <el-form-item label="用户名" :label-width="formLabelWidth" >
                <el-input v-model="updateList.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="updateList.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话号码" :label-width="formLabelWidth" >
                <el-input v-model="updateList.phoneNumber" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="QQ号码" :label-width="formLabelWidth">
                <el-input v-model="updateList.qqNumber" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="微信号码" :label-width="formLabelWidth">
                <el-input v-model="updateList.weChatNumber" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="修改理由" :label-width="formLabelWidth">
                <el-select v-model="region" placeholder="请选择修改理由">
                  <el-option label="用户信息有误" value="用户信息有误"></el-option>
                  <el-option label="违规昵称" value="违规昵称"></el-option>
                  <el-option label="其它" value="其它"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="success" @click="cancelForm()">取 消</el-button>
              <el-button type="danger" @click="confirmForm(updateList)">确 定</el-button>
            </div>
            <div><center><label style="font-family: 'Leelawadee UI Semilight',serif;color: crimson">提示: 管理员您好,修改的信息内容将实时通知用户!</label></center></div>
          </el-dialog>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        align="center"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[1, 5, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageList.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      Qoptions: [{
        value: 1,
        label: '查询全部用户'
      }, {
        value: 2,
        label: '根据用户名查询'
      }, {
        value: 3,
        label: '根据电话号码查询'
      }, {
        value: 4,
        label: '根据QQ号码查询'
      }, {
        value: 5,
        label: '根据微信号码查询'
      }],
      pageSize: 5,
      currentPage: 1,
      queryConditions: '',
      value: '',
      message: '',
      region: '',
      deleteId: '',
      dialogFormVisible: false,
			dialogAdd: false,
      dialogVisible: false,
      formLabelWidth: '120px',
      baseURL: 'http://localhost/admin/users/',
      pageList: [{
        total: 0,
        current: 1,
        size: 5,
        pageList: {
          userId: '',
          username: '',
          password: '',
          email: '',
          phoneNumber: '',
          qqNumber: '',
          weChatNumber: ''
        }
      }
      ],
      addlist: {
				username: '',
				password: '',
				email: '',
				phoneNumber: '',
				qqNumber: '',
				weChatNumber: ''
      },
      updateList: [{
        userId: '',
        username: '',
        password: '',
        email: '',
        phoneNumber: '',
        qqNumber: '',
        weChatNumber: ''
      }
      ],
      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4
    }
  },
  created() {
    this.pageFetchData()
  },
  methods: {
		confirmAdd() {
			const vm = this
      const param = vm.addlist
      if (param.username === ''){
				vm.$message({
					message: '用户名不能为空!',
					type: 'warning',
					center: true
				});
      } else if (param.password === ''){
				vm.$message({
					message: '密码不能为空!',
					type: 'warning',
					center: true
				});
      } else if (param.email === ''){
				vm.$message({
					message: '邮箱不能为空!',
					type: 'warning',
					center: true
				});
			}else if (param.phoneNumber === ''){
				vm.$message({
					message: '手机号不能为空!',
					type: 'warning',
					center: true
				});
			}else {
				this.axios({
					method: 'POST',
					url: vm.baseURL + 'add',
					params: { 'userEntity': vm.addlist }
				}).then(async function(resp) {
					if (resp.data.status === 'ok'){
						vm.$message({
							message: '新增用户成功!',
							type: 'success',
							center: true
						});
						vm.pageFetchData();
					} else {
						vm.$message({
							message: '服务器忙,请稍后重试!',
							type: 'error',
							center: true
						});
					}
				})
				this.dialogAdd = false
      }
		},
		cancelAdd() {
			this.dialogAdd = false
    },
    pageFetchData() {
      var vm = this
      this.axios({
        method: 'GET',
        url: vm.baseURL + 'page',
        params: { 'currentPage': vm.currentPage ,'pageSize': vm.pageSize }
      }).then(async function(resp) {
        if (resp.data.msg === '执行成功'){
          vm.pageList = await resp.data.data
        } else {
          vm.$message({
						message: '服务器忙,请稍后重试!',
						type: 'error',
						center: true
					});
        }
      })
    },
    deleteUser(userId) {
      var vm = this
      vm.deleteId = userId
      vm.dialogVisible = true
    },
    confirm(userId) {
      var vm = this
      vm.dialogVisible = false
      this.axios({
        method: 'GET',
        url: vm.baseURL+'delete/' + userId,
        params: { 'userId': userId }
      }).then(function(resp) {
        if (resp.data.status === 'ok') {
          vm.$message({
            message: '删除用户成功!',
            type: 'success',
            center: true
          })
          vm.pageFetchData()
        } else {
          vm.$message({
            message: '删除用户失败,请稍后重试!',
            type: 'error',
            center: true
          })
        }
      })
    },
    cancel() {
      var vm = this
      vm.dialogVisible = false
    },
    dialog(index) {
      var vm = this
      vm.updateList = vm.pageList.pageList[index]
      vm.dialogFormVisible = true
    },
    cancelForm() {
      var vm = this
      vm.dialogFormVisible = false
    },
    confirmForm(updateList) {
      var vm = this
      vm.dialogFormVisible = false
      var reason = vm.region
      this.axios({
        method: 'POST',
        url: vm.baseURL+'update',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        params: { 'userEntity': updateList, 'modifyReason': reason }
      }).then(function(resp) {
        if (resp.data.status === 'ok') {
          vm.$message({
            message: '更新用户信息成功!',
            type: 'success',
            center: true
          })
          vm.pageFetchData()
        } else {
          vm.$message({
            message: '更新用户信息失败,请稍后重试!',
            type: 'error',
            center: true
          })
        }
      })
    },
    handleSizeChange(val) {
      var vm = this
      vm.pageSize = val
      vm.pageFetchData()
    },
    handleCurrentChange(val) {
      var vm = this
      vm.currentPage = val
      vm.pageFetchData()
    },
    blurQuery() {
      var vm = this
      if (vm.queryConditions === null || vm.queryConditions === '' && vm.value !== 1 ) {
        vm.$message({
          message: '请输入查询条件!',
          type: 'warning',
          center: true
        });
      } else {
        if (vm.value === 1) {
          vm.pageFetchData()
        } else if (vm.value >5 || vm.value < 1) {
          vm.$message('请选择模糊查询类型!')
        } else {
          this.axios({
            method: 'GET',
            url: vm.baseURL+'blur/' + vm.value ,
            params: { 'queryParam': vm.queryConditions ,'condition' : vm.value}
          }).then(function(resp) {
            const h = vm.$createElement
            if (resp.data.status === 'ok') {
              vm.pageList.pageList = resp.data.userEntityList
              vm.$message({
                message: h('p', null, [
                  h('span', null, '共检索到 '),
                  h('i', { style: 'color: teal' }, resp.data.userEntityList.length),
                  h('span', null, ' 条数据 ')
                ]),
                center: true
              })
            } else {
              vm.$message({
                message: h('p', null, [
                  h('span', null, '没有检索到数据 ')
                ]),
                center: true
              })
            }
          })
        }
      }
    }
  }
}

</script>

<style scoped>
  .button{
    margin-top: 10px;
  }
  span{
    margin-top: 500px;
  }
  .block{
    margin-top: 50px;
  }
</style>
